<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>dmind.info</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<div class="section">
    <div class="container">
        <form name=theform>

            <div class="field is-horizontal">
                <div class="field-label is-normal">
                    <label class="label">指定目录</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input class="input" type="text" id='dirname' placeholder="如果不填，默认是上传到根目录" size=50>
                        </div>
                    </div>

                    <div class="field">
                        <div id="container">
                            <button id="selectfiles" class='button'>选择文件(csv)</button>
                            <button id="postfiles" class='button is-info'>开始上传</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--            <div class="field">-->
            <!--                <label class="label">上传到指定目录</label>-->
            <!--                <input class="input" type="text" id='dirname' placeholder="如果不填，默认是上传到根目录" size=50>-->
            <!--            </div>-->

            <!--            <div class="field">-->
            <!--                <div id="container">-->
            <!--                    <button id="selectfiles" class='button'>选择文件</button>-->
            <!--                    <button id="postfiles" class='button is-info'>开始上传</button>-->
            <!--                </div>-->
            <!--            </div>-->

            <div class="field">
                <table class="table is-hoverable is-fullwidth">
                    <col style="width:30%">
                    <col style="width:40%">
                    <col style="width:20%">
                    <col style="width:10%">
                    <thead>
                    <tr>
                        <th>原始文件名</th>
                        <th>上传文件名</th>
                        <th>进度</th>
                    </tr>
                    </thead>

                    <tbody id="ossfile">
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</div>


<div class="section">
    <div class="container" id="params">

        <div class="columns">
            <div class="column">
                <div class="field">
                    <label class="label">上传文件名</label>
                    <div class="control">
                        <input class="input" type="text" placeholder="需要解析的文件" disabled name="url">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">分词接口</label>
                    <div class="control">
                        <input class="input" type="text" placeholder="如: http://127.0.0.1:25000/seg"
                               name="baiduLacServer">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">核心词(Keyword)</label>
                    <div class="control">
                        <input class="input" type="text" placeholder="如:保险" name="topicWord">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field is-grouped">
                    <div class="control">
                        <label class="label">包含核心词</label>
                        <label class="radio">
                            <input type="radio" name="isTopic" value="true" checked>
                            Yes
                        </label>
                        <label class="radio">
                            <input type="radio" name="isTopic"  value="false">
                            No
                        </label>
                    </div>

                    <div class="control">
                        <label class="label">分割Xmind</label>
                        <label class="radio">
                            <input type="radio" name="divided" checked  value="true">
                            Yes
                        </label>
                        <label class="radio">
                            <input type="radio" name="divided"  value="false">
                            No
                        </label>
                    </div>
                </div>
            </div>

        </div>

        <div class="columns">
            <div class="column">
                <div class="field">
                    <label class="label">1级topN (最大50)</label>
                    <div class="control">
                        <input class="input topN" type="number" placeholder="20" name="l1" max="50" value="20">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">2级topN (最大40)</label>
                    <div class="control">
                        <input class="input topN" type="number" placeholder="15" name="l2" max="40" value="15">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">3级topN (最大30)</label>
                    <div class="control">
                        <input class="input topN" type="number" placeholder="10" name="l3" max="30" value="10">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">4级topN (最大20)</label>
                    <div class="control">
                        <input class="input topN" type="number" placeholder="5" name="l4" max="20" value="5">
                    </div>
                </div>
            </div>
        </div>

        <div class="field">
            <label class="label">自定义停顿词(Stop Word)</label>
            <div class="control">
                <textarea class="textarea" placeholder="除基础停顿词外, 比如解析 [保险]时, 可以添加 阳光,中国 作为忽略词"></textarea>
            </div>
        </div>


        <div class="columns">
            <div class="column">
                <div class="field">
                    <label class="label">停顿词分割符号</label>
                    <div class="control">
                        <input class="input" type="text" placeholder="如：，" name="stopSymbol">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label">Email 收件地址</label>
                    <div class="control">
                        <input class="input" type="email" placeholder="abc@qq.com" name="mailTo">
                    </div>
                </div>
            </div>
        </div>

        <div class="field">
            <div class="control">
                <button class="button is-fullwidth is-success" id="iBtnSubmit" onclick="parseAdd()">开始解析</button>
            </div>
        </div>


    </div>
</div>

<script>

    function notify(content) {
        let div = document.createElement("div");
        div.setAttribute("class", "notification is-danger is-light");
        div.setAttribute("onclick", "deleteNotify()");
        div.innerText = content;
        document.querySelector("#params").append(div);
    }


    function deleteNotify() {
        let notificationList = document.querySelectorAll('.notification');
        if (notificationList !== null && notificationList.length > 0) {
            for (let i = notificationList.length - 1; i >= 0; i--) {
                notificationList[0].parentNode.removeChild(notificationList[i]);
            }
        }
    }


    function parseAdd() {
        let count = 0;
        let obj = {};
        //校验 url
        let params = document.querySelector("#params");
        let fileUrl = params.querySelector("input[name=url]").value;
        if (fileUrl === '' || fileUrl === undefined) {
            notify("上传文件不能为空")
            count += 1;
        } else {
            obj.url = fileUrl;
        }

        let baiduLacServer = params.querySelector("input[name=baiduLacServer]").value;
        if (baiduLacServer === '' || baiduLacServer === undefined) {
            notify("分词接口不能为空")
            count += 1;
        } else {
            obj.baiduLacServer = baiduLacServer;
        }

        let topicWord = params.querySelector("input[name=topicWord]").value;
        if (topicWord === '' || topicWord === undefined) {
            notify("核心词(Keyword)")
            count += 1;
        } else {
            obj.topicWord = topicWord;
        }

        count += checkTopN(params.querySelector("input[name=l1]"), 'l1', obj);
        count += checkTopN(params.querySelector("input[name=l2]"), 'l2', obj);
        count += checkTopN(params.querySelector("input[name=l3]"), 'l3', obj);
        count += checkTopN(params.querySelector("input[name=l4]"), 'l4', obj);

        let mailTo = params.querySelector("input[name=mailTo]").value;
        if (mailTo === '' || mailTo === undefined) {
            notify("收件地址Email不能为空")
            count += 1;
        } else {
            obj.mailTo = mailTo;
        }

        obj.isTopic = document.querySelector('input[name="isTopic"]:checked').value
        obj.divided = document.querySelector('input[name="divided"]:checked').value
        obj.stopWords = params.querySelector("textarea").value;
        obj.stopSymbol = params.querySelector("input[name=stopSymbol]").value;

        if (count === 0){
            postJson("/parse/add",obj);
            let btn = document.querySelector('#iBtnSubmit');
            btn.setAttribute("class", "button is-fullwidth is-success is-loading");
            const interval = setInterval(function () {
                btn.setAttribute("class", "button is-fullwidth is-success");
                clearInterval(interval);
            }, 10000);
        }
    }


    function checkTopN(ele, index, obj) {
        if (ele.value === '' || ele.value === undefined || parseInt(ele.value) > parseInt(ele.max) || parseInt(ele.value) < 1) {
            notify(index + "级topN 最大" + ele.max + " 最小1");
            return 1;
        } else {
            obj[index] = ele.value;
            return 0;
        }
    }

    function postJson(url, obj) {
        fetch(url, {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(obj)
        }).then(res => console.log(res));
    }

</script>

</body>
<script type="text/javascript" src="/js/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="/js/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="/js/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="/js/lib/base64.js"></script>
<script type="text/javascript" src="/js/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/js/upload.js"></script>
</html>
